<!--
* description: 旧件管理-门店返件登记-详情
* author: wangjuan
* createdDate: 2021-3-4
-->
<template>
  <section class="editStoreReturnRegistration-detail">
    <el-dialog
      v-dialogDrag
      :visible.sync="curPopupsVisible"
      :title="textMap"
      :append-to-body="true"
      width="70%"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader
        slot="title"
        :title="textMap"
        :style-type="$store.state.app.dialogType"
      />
      <div class="filter-container filter-title">返件信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds || ''"
            :code="formField[comp.codeField]"
            :disabled="true"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">旧件信息</div>
      <div class="app-container app-container-table">
        <one-table-template
          ref="multipleTable"
          :key="oneTableKey"
          :dynamic-api-config="apiConfig"
          :dynamic-table-cols="tableCols"
          :dynamic-form-fields="formField"
          :dynamic-is-show-more-btn="true"
          :dynamic-is-show-select="false"
          :dynamic-is-init-table="true"
          :refresh-table-key="refreshTableKey"
          :dynamic-table-defult-height="300"
        />
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import { formMixins } from "@/components/mixins/formMixins";
import OneTableTemplate from "@/components/templates/oneTable";
import api from "@/api/se/coreManagement";

export default {
  components: {
    OneTableTemplate,
    dialogHeader: () => import("@/components/dialogHeader"),
  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],

  props: {
    popupsVisible: { type: Boolean, default: false },
    // 从网格传入的编辑行数据(json)
    dynamicEditRowData: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },

  data() {
    const viewPageCode = "storeReturnRegistration-edit";
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode]);

    return {
      apiConfig: api.CoreInfor,
      refreshTableKey: "0",

      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          : [
              {
                compKey: "compKey10",
                labelName: "返件单号：",
                codeField: "returnCode",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMul: false,
                isMust: true,
                disabled: true,
              },
              {
                compKey: "compKey1",
                labelName: "返件类型：",
                codeField: "returnTypeName",
                component: () => import("@/components/org/LookupValue"),
                type: "dropdownList",
                isRequire: true,
                isMul: false,
                isMust: true,
              },
              {
                compKey: "compKey2",
                labelName: "返件方式：",
                codeField: "returnMethodName",
                component: () => import("@/components/org/LookupValue"),
                type: "dropdownList",
                isRequire: true,
                isMul: false,
                isMust: true,
              },
              {
                compKey: "compKey3",
                labelName: "运费：",
                codeField: "expressFee",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMul: false,
                isMust: true,
              },
              {
                compKey: "compKey4",
                labelName: "物流公司：",
                codeField: "expressName",
                component: () => import("@/components/org/LookupValue"),
                type: "dropdownList",
                isMul: false,
                isMust: true,
              },
              {
                compKey: "compKey5",
                labelName: "物流单号：",
                codeField: "expressCode",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMul: false,
                isMust: true,
              },
              {
                compKey: "compKey7",
                labelName: "返件日期：",
                codeField: "realDate",
                component: () =>
                  import("@/components/org/datePicker/datePicker"),
                type: "datePicker",
                isMul: false,
                isMust: true,
              },
              {
                compKey: "compKey8",
                labelName: "返件状态：",
                codeField: "returnStatusName",
                component: () => import("@/components/org/LookupValue"),
                type: "dropdownList",
                isMul: false,
                isMust: true,
              },
              {
                compKey: "compKey9",
                labelName: "备注：",
                codeField: "remark",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMul: false,
                isMust: true,
              },
            ],
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
              {
                prop: "releaseId",
                label: "主键ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "createdDate",
                label: "返件登记日期",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "preAuthorCode",
                label: "索赔单号",
                align: "center",
              },
              {
                prop: "partCode",
                label: "备件编码",
                align: "center",
              },
              {
                prop: "partName",
                label: "备件名称",
                align: "center",
              },
              {
                prop: "coreBarcode",
                label: "旧件条码号",
                align: "center",
              },
            ],
      // 标题
      textMap: "门店返件登记详情",

      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          returnCode: "",
          returnType: "",
          returnTypeName: "",
          returnMethod: "",
          returnMethodName: "",
          expressFee: "",
          expressName: "",
          expressCode: "",
          realDate: "",
          returnStatus: "",
          returnStatusName: "",
          remark: "",
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
    };
  },

  watch: {
    curPopupsVisible: {
      handler: function (val) {
        if (val) {
          this.formField.returnCode = this.dynamicEditRowData.returnCode;
          this.queryTable(1);
        }
      },
    },
  },
  methods: {
    closeEdit() {
      this.$emit("update:popupsVisible", false);
      this.oneTableKey = this.$utils.generateId();
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-title {
  font-size: 18px;
  font-weight: bolder;
}
.filter-container.filter-title::before {
  border-left: 4px solid #0075ff;
  padding-right: 10px;
  height: 20px;
  left: 0px;
  top: 4px;
}
</style>

